<template>
  <div class="search-page">
    <div class="head">
      <button class="icon-button" @click="goBack">
        <img src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png" alt="Back" />
      </button>
      <input
        class="search-input"
        v-model="query"
        @keyup.enter="performSearch"
        placeholder="请输入搜索内容"
      />
    </div>
    <div class="search-records">
      <p>搜索记录</p>
      <div class="container">
        <span class="outcome" v-for="(record, index) in searchRecords" :key="index">
          {{ record }}
        </span>
      </div>
    </div>
    <div v-if="searchResults.length > 0" class="search-results">
      <p><b>搜索结果</b></p>
      <div>
        <div class="searchdata" v-for="result in searchResults" :key="result.id">
          <p>{{ result.title }}</p>
          <p>{{ result.texts }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import axios from "../../../utils/request";

const query = ref("");
const searchRecords = ref(JSON.parse(localStorage.getItem("searchRecords")) || []);
const searchResults = ref([]);

// Function to perform search
const performSearch = async () => {
  if (query.value.trim() === "") return;

  // Save query to search records
  if (!searchRecords.value.includes(query.value)) {
    searchRecords.value.push(query.value);
    localStorage.setItem("searchRecords", JSON.stringify(searchRecords.value));
  }

  try {
    console.log(query.value, "query.value");
    const response = await axios.get(`http://172.27.6.151:32112/api/get/searchData`, {
      params: { text: query.value },
    });

    searchResults.value = response.data.data || [];

    console.log(response.data.data, "searchResults.data");
  } catch (error) {
    console.error("Search error:", error);
  }
};

// Function to handle back navigation
const goBack = () => {
  window.history.back();
};

// Watch for changes in search records to keep localStorage in sync
watch(searchRecords, (newRecords) => {
  localStorage.setItem("searchRecords", JSON.stringify(newRecords));
});
</script>

<style scoped>
.search-page {
  padding: 20px;
}

.head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-button {
  margin-top: -5px;
}
.search-input {
  margin-left: 5%;
}
.search-records {
  width: 90%;
  height: 200px;
  margin-top: 20px;
  margin-left: 5%;
  overflow: auto;
}

.search-records::-webkit-scrollbar {
  display: none; /* 对于 Webkit 浏览器（如 Chrome 和 Safari）隐藏滚动条 */
}
button {
  cursor: pointer;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.container {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px;
}

.outcome {
  background-color: #f0f0f0;
  width: auto;
  text-align: center;
  border-radius: 4px;
  padding: 5px 10px;
  height: 25px;
  line-height: 15px;
  box-sizing: border-box;
}
.searchdata p {
  text-indent: 2em;
  line-height: 30px;
  letter-spacing: 2px;
}
</style>
